<!-- 页面静态由刘浩搭建
@date 2023.7.21
@author 刘浩
-->
<template>
  <div class="container">
    <div class="card-content">
      <radioButtonGroup :changeValue="radioValue" :radioOptions="filterOptions" @change="radioChange" />
    </div>
  </div>

  <layout-card v-model="search" :filters="terminalOptions" headline="信息列表" headtitle="数据筛选" :hasButton="true"
    @search-change="getData" @search-reset="resetGetData">
    <template #action>
      <el-button type="primary" @click="exportFiles" :disabled="isexport">导出</el-button>
    </template>
    <table-common :columns="exampleColumns" :loading="loading" :pagination="pager" :table-data="data" size="large"
      @current-change="myChangeCurrent" @size-change="myChangePageSize" @sort-change="handleSortChange"
      stripe></table-common>
  </layout-card>
</template>

<script lang="ts" setup>
import { computed, ref, onBeforeMount, onMounted, watch } from 'vue'
// 7-18修改LayoutCard 页面，hasButton参数为false时显示为弹窗样式，为true时显示为搜索栏样式
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { exampleColumns } from './config/columns'
import { exampleOptions1, testOptions } from './config/filters'
import {
  alarmPageList,
  getExportFiles,
  PageListType
} from '@/api/keynote/alarm'
import { getResource } from '@/api/resource'
import radioButtonGroup from '@/components/RadioButtonGroup/index.vue'
import { usePagination } from 'vue-request'
// =============模拟接口数据-START
// 此处是模拟的接口返回数据，项目中请用`@/api/`下接口代替，删除当前代码！

const Service = (data: ListParams) => {
  return new Promise((resolve) => { })
}

const isexport = ref(false)
// =============模拟接口数据==END
/**
 * author 刘浩
 * date  2023-7-21
 * 排序的回调函数   column 当前列
 */
const handleSortChange = (column: any) => {
  const prop = column.prop
  let order = column.order
  if (order === 'descending') {
    order = 'DESC'
  } else if (order === 'ascending') {
    order = 'ASC'
  }
  search.value.order = [{ column: prop, method: order }]
  getData()
}

const {
  run,
  data,
  loading,
  current,
  pageSize,
  total,
  changeCurrent,
  changePageSize
} = usePagination(Service, {
  manual: true, // 开启轮询
  pagination: {
    currentKey: 'pageNum',
    pageSizeKey: 'pageSize',
    totalKey: 'data.total'
  }
})

watch(data, (newVal) => {
  if (newVal.length === 0) {
    isexport.value = true
  } else {
    isexport.value = false
  }
})
/**
 * author 万德渝
 * date  2023-7-22
 * 页面组件绑定动态数据
 */

// 7-17------------------
// 定义自己的total数据  给的total是readonly
const myTotal = ref(1)
const pager = computed(() => ({
  currentPage: current.value,
  pageSize: pageSize.value,
  // total: total.value,
  total: myTotal.value,
  pageCount: Math.ceil(myTotal.value / pageSize.value) === 0 ? 1 : Math.ceil(myTotal.value / pageSize.value)
}))

const temp = ref('')
// 航站楼 数据字典包装
const terminalOptions = ref(exampleOptions1)
// alarmType 数据字典包装
const resourceAlarmOptions = ref(testOptions)

// 定义按钮组的值
const radioValue = ref(null)
// 查询的参数
const search = ref<FilterDataType>({})
// 查询的选项
const filterOptions = ref([])

// 按钮组的点击事件
const radioChange = (value: any) => {
  radioValue.value = value
}

// 重写当前页被改变
const myChangeCurrent = (value: any) => {
  changeCurrent(value)
  getData()
}
// 重写当前页的大小
const myChangePageSize = (value: any) => {
  changePageSize(value)
  getData()
}

// 定义清空方法
const resetGetData = (data: FilterDataType) => {
  radioValue.value = null
  search.value = data
  pager.value.currentPage = 1
  pager.value.pageSize = 10
  // temp.value = ''
  getData()
}

// 获取数据
const getData = () => {
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: {
      ...search.value,
      alarmType: radioValue.value
    }
  }
  /**
   * 请求查询接口
   * params 查询的参数
   *  */
  alarmPageList(params).then((res) => {

    res.data.list.forEach((item) => {
      for (const i of filterOptions.value) {
        if (i.value == item.alarmType) {
          item.alarmType = i.label
        }
      }
    })
    data.value = res.data.list
    myTotal.value = res.data.total
  })
  run(params)
  loading.value = false
}
onBeforeMount(() => {
  /** 获取航站楼的数据字典 */
  getResource('terminal').then((res) => {
    terminalOptions.value.forEach((e) => {
      if (e.prop == 'terminal') {
        // 这部分数据应该由接口获取
        // 刚进入页面和点击清空时，应把选择情况清空
        e.inputProps.options = res.data.properties.meta.reverse()
        // 手动重写单选按钮点击事件
      }
    })
  })
  /** 获取数据字典 */
  getResource('keynote_resource_alarm').then((res) => {
    filterOptions.value = [
      { label: '全部', value: null },
      ...res.data.properties.meta
    ]
  })
})

// 页面加载时显示数据
onMounted(getData)

// 导出文件名时间格式修正
function getCurrentDateTime() {
  const currentDateTime = new Date()
  const year = currentDateTime.getFullYear()
  const month = (currentDateTime.getMonth() + 1).toString().padStart(2, '0')
  const day = currentDateTime.getDate().toString().padStart(2, '0')

  const dateTimeString = year + month + day

  return dateTimeString
}

// 导出文件
const exportFiles = () => {
  getExportFiles({ ...search.value, alarmType: radioValue.value })
    .then((res) => {
      const debug = res
      if (debug) {
        const elink = document.createElement('a')
        elink.download = `告警记录${getCurrentDateTime()}.xlsx`
        elink.style.display = 'none'
        const blob = new Blob([debug], { type: 'application/x-msdownload' })
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      } else {
      }
    })
    .catch((err) => { })
}

</script>

<style scoped>
.container {
  background: #f5f7f9;
  min-height: auto;
  overflow: hidden;
}

.container .card-content {
  padding: 10px;
  margin: 0;
  background: #fff;
  border-radius: 8px;
}
</style>
